<template>
  <div class="pagination_tool">
    <div class="pagination_tool_left" :class="allSelect?'allSelectClass':''">
      <span class="selectTxts">已选{{selectNums}}条数据,共{{total}}条 ({{queryParams.pageNum}}页)</span>
      <span class="selectAll" @click="handAllSelected">选择全部</span>
    </div>
    <el-pagination
        background
        v-model:currentPage="queryParams.pageNum"
        v-model:page-size="queryParams.pageSize"
        :page-sizes="[10, 20, 30, 50]"
        :pager-count="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Number(total)"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {
    name: "paginate",
    components:{},
    props:{
      allSelect:{type:Boolean,default:false}, //是否显示全选功能
      selectNums:{type:[Number,String],default: 0}, //选中条数
      total:{type:[Number,String],default: 0},//总条数
      queryParams:{type:Object,default:()=>{}},//分页信息
    },
    setup(props, context){
      const handAllSelected = () => {
         context.emit("paginate",{type:"selectAll"})
      }
      const handleCurrentChange = (val) => {
        context.emit("paginate",{type:"current",val})
      }
      const handleSizeChange = (val) => {
        context.emit("paginate",{type:"size",val})
      }
      return{
        handAllSelected,
        handleSizeChange,
        handleCurrentChange
      }
    },
    created() {},
    mounted() {},
   
    methods: {},
    computed:{},
    watch:{},
    beforeDestroy() {},
    destroyed(){}
}
</script>

<style scoped lang="scss">
  .pagination_tool{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #fff;
    margin: 6px 0;
    padding: 0 10px;
    overflow: hidden;
    font-size: 14px;
  }
  .selectAll{
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    color: #5582f3;
    margin-left: 5px;
  }
</style>